import React, { Component } from "react";
import { Modal, InputItem } from "antd-mobile";
import "./pwdKeyboard.scss";
import back from "../../../images/icon-open-account-close.png";
class PwdKeyboard extends Component {
	constructor(props) {
		super(props);
		this.state = {
			inputVal: ""
		};
	}

	/**输入改变 */
	pwdInputChange(val) {
		this.setState({
			inputVal: val
		});
	}
	render() {
		const { isShow, onConfirm, payMoney, closeModal } = this.props;
		const { inputVal } = this.state;
		return (
			<Modal className="pwd_kb-box" visible={isShow} transparent>
				<div className="top-box">
					<img onClick={closeModal} className="close" src={back} alt="关闭" />
					<div className="title">请输入支付密码</div>
				</div>
				<div className="money-text">
					<span className="money-unit">¥ </span>
					<span>{payMoney}</span>
				</div>
				<div className="money_val-box">
					<div className="money-val">{inputVal.split("")[0] ? "." : ""}</div>
					<div className="money-val">{inputVal.split("")[1] ? "." : ""}</div>
					<div className="money-val">{inputVal.split("")[2] ? "." : ""}</div>
					<div className="money-val">{inputVal.split("")[3] ? "." : ""}</div>
					<div className="money-val">{inputVal.split("")[4] ? "." : ""}</div>
					<div className="money-val">{inputVal.split("")[5] ? "." : ""}</div>
					<InputItem
						className="money-input"
						type="money"
						ref={el => {
							if (el) {
								this.inputRef = el;
								if (this.inputRef) {
									// 添加延时，一直调用会导致弹不出来
									if (!this.st) {
										this.st = setTimeout(() => {
											this.inputRef.focus();
											this.st = undefined;
										}, 300);
									}
								}
							}
						}}
						maxLength="6"
						onChange={this.pwdInputChange.bind(this)}
						onVirtualKeyboardConfirm={v => onConfirm(v)}
						disabledKeys={["."]}
					></InputItem>
				</div>
			</Modal>
		);
	}
}
export default PwdKeyboard;
